import React, { useState, useEffect } from 'react';
import style from './index.module.less';

const FrequentlyAsk = () => {
    useEffect(() => {
        handleTab('1');
    }, []);
    const [tabActive, setTabActive] = useState('2');
    function handleTab(type: string) {
        setTabActive(type);
        // 获取列表数据
        if (type === '1') {
            // 获取协议内容
            setAskList([
                {
                    q: '怎么保护我的权益？',
                    a: [
                        '市面上论文润色机构质量难辨，一不小心就会被骗，为了让客户安心，确保合作的安全、稳定，我们会在润色服务开始前，与客户签署服务协议，协议内明确划定我方的服务范围、及双方的应尽责任。本协议具有法律效力，最大程度保护双方的合法权益。',
                    ],
                },
                {
                    q: '能开发票吗？',
                    a: ['万方寰宇是正规公司，提供正规服务，如有需要，可以依法为您提供正规发票。'],
                },
                {
                    q: '隐私泄露了怎么办？',
                    a: [
                        '我们多年扎根医学论文润色领域，非常了解医生们的顾虑，因此为了保护客户的隐私，我们的每位员工都签署了具有法律效力的保密协议，如有泄露，立即追究法律责任。同时把保护隐私、严谨泄密融入日常培训中，加强工作中的保密意识。',
                    ],
                },
                {
                    q: '如何支付费用？',
                    a: [
                        '我们支持的付款方式主要为银行汇款，可通过线上或线下汇款的方式，将指定金额的服务费用，汇款至指定账号，确认到账后启动服务流程。',
                    ],
                },
            ]);
        } else if (type === '2') {
            // 获取常见问题
            setAskList([
                {
                    q: '为什么选择润色服务，我能得到什么？',
                    a: [
                        '临床工作繁重，论文又需要规划实验、整理数据，再整合成逻辑严谨的文稿，正常人都难以兼顾。而且论文对专业英语要求极高，但中文与英语间存在客观的语言壁垒，自行翻译后可能降低文稿的可读性，这都会影响论文质量。我们的深度润色服务，将启用专业的中文编辑与英文母语编辑，多重润色、打磨文稿质量，达成客户需求。',
                    ],
                },
                {
                    q: '那么多机构，为什么选择万方寰宇？',
                    a: [
                        '万方寰宇专注于医学SCI论文润色，潜心服务多年，更加了解医生群体，更能打造出符合个人特色的论文稿件。而且，万方寰宇立志“为祖国医学发展尽我们所能”，我们愿怀抱更大的理想，成就每一位医学人。',
                    ],
                },
                {
                    q: '万方寰宇有什么服务优势？',
                    a: [
                        '专业能力方面，我们的润色服务坚持层层筛选、全程优化、一对一服务，利用多年经验、结合稿件特性，规避绝大多数可预见的困难与风险，极大程度节省客户的时间成本，尽最大可能提高稿件整体质量。人性化服务方面，我们理解医生的顾虑与困境，将严格履行保密协议，信息层层加密，保证不泄露任何文稿内容与用户相关资料。',
                    ],
                },
                {
                    q: '我们的服务周期有多长？服务流程是什么？',
                    a: [
                        '一旦签订协议，我们将按照协议内容，在1年内全程陪同、提供服务。在此期间，您如果有目标期刊，或对论文风格有要求，需要提前沟通说明，以便深度润色后，产出更具“个人特色”的文稿。正式进入润色流程后，双线编辑与作者、文稿不断磨合，一对一“小管家”步步跟进润色进度，兼顾高质量、高效率与独特性，合作完成文稿的打磨与沉淀。',
                    ],
                },
                {
                    q: '全程服务需要多少钱？',
                    a: [
                        '每个稿件的具体字数、润色深度、润色难度都不同，编辑团队需要制定不同的优化方案，收费也有较大波动。如想了解针对性的报价，或有其他疑问，可以点击联系在线客服。',
                    ],
                },
            ]);
        }
    }
    const [askList, setAskList] = useState<any[]>([]);
    return (
        <>
            <div className={style.publish_header} />
            {/* <div className={style.publish_title}>
      <div className={`h2 strong ${style.blue}`}>
        有关心、有关注、有观点  有服务、有耐心、有热忱
      </div>
      <div className="h3 strong">万方寰宇 期待成为您的同路人</div>
    </div> */}
            <ul className={style.tabs_body}>
                <li
                    className={tabActive === '1' ? style.active : ''}
                    onClick={() => handleTab('1')}
                >
                    协议内容
                </li>
                <li
                    className={tabActive === '2' ? style.active : ''}
                    onClick={() => handleTab('2')}
                >
                    常见问题
                </li>
            </ul>
            {askList.map((item: any, index: number) => {
                return (
                    <div className={style.problem_body} key={index}>
                        <div className={style.problem_q}>
                            <div className={style.q_icon}>Q</div>
                            <div>{item.q}</div>
                        </div>
                        <div className={style.problem_a}>
                            {item.a.map((itemx: any, indexx: number) => {
                                return <div key={indexx}>{itemx}</div>;
                            })}
                        </div>
                    </div>
                );
            })}
        </>
    );
};

export default FrequentlyAsk;
